<template>
  <Panel   shadow :padding="10">
    <el-table
      :data="video"
      style="width: 100%">
      <el-table-column
        label="ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="fileID"
        prop="fileID">
      </el-table-column>
      <el-table-column
        label="uuid"
        prop="video_id">
      </el-table-column>
      <el-table-column
        label="视频描述"
        prop="des">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑视频" :visible.sync="editing" :close-on-click-modal = "false">
      <el-form :inline="true"  ref="form" :model="editvideo">
        <el-form-item label="fileID">
          <el-input  v-model="editvideo.fileID"></el-input>
        </el-form-item>
        <el-form-item label="uuid">
          <el-input v-model="editvideo.video_id" ></el-input>
        </el-form-item>
        <el-form-item label="视频描述">
          <el-input type="textarea" v-model="editvideo.des"></el-input>
        </el-form-item>
        <el-form-item label="章节编号">
          <el-input  v-model="editvideo.chapter"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="!adding" type="primary" @click="onSubmit">更新</el-button>
          <el-button v-if="adding" type="primary" @click="onSubmit">新增</el-button>
        </el-form-item>
      </el-form>
    </el-dialog >
    <el-button style="margin-top:20px" type="primary" @click="addVideo">
      新增
    </el-button>
  </Panel>
</template>
<script>
  import api from '../../api.js'

  export default {
    name: 'video',
    data () {
      return {
        video: [],
        editvideo: {},
        editing: false,
        adding: false
      }
    },
    mounted () {
      this.getVideoList()
    },
    methods: {
      getVideoList () {
        api['getVideo']().then((res) => {
          this.video = res.data.data
        }).catch()
      },
      handleEdit (index, row) {
        this.editing = true
        this.editvideo['id'] = this.video[index].id
        this.editvideo['fileID'] = this.video[index].fileID
        this.editvideo['video_id'] = this.video[index].video_id
        this.editvideo['des'] = this.video[index].des
        this.editvideo['chapter'] = this.video[index].chapter
        this.editvideo = JSON.parse(JSON.stringify(this.editvideo))
        console.log(index, row.title)
      },
      uuid () {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = Math.random() * 16 | 0
          var v = c === 'x' ? r : (r & 0x3 | 0x8)
          return v.toString(16)
        })
      },
      onSubmit () {
        let params = this.editvideo
        console.log('par', params)
        if (!this.adding) {
          api['editVideo'](params).then((res) => {
            this.editing = false
            this.adding = false
            this.getVideoList()
          }).catch()
        } else {
          params.video_id = this.uuid()
          api['addVideo'](params).then((res) => {
            this.editing = false
            this.adding = false
            this.getVideoList()
          }).catch()
        }
      },
      addVideo () {
        this.editing = true
        this.adding = true
      }
    }
  }
</script>

<style scoped lang="less">
</style>
